<%--
  Created by IntelliJ IDEA.
  User: Ken
  Date: 2022/4/27
  Time: 9:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>锋迷五子棋在线-注册页</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .main_div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
            border-radius: 10px;
            box-shadow: 10px 10px 10px gray;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .title_div {
            font-size: 30px;
            font-family: "楷体";
            text-shadow: 10px 10px 10px gray;
        }

        .btn_div button{
            width: 80px;
        }
    </style>

    <script src="js/jquery.min.js"></script>
    <script>
        //判断用户名是否存在 - 主线程
        function existeUsername(){
            //获取当前输入的用户名
            var username = $("[name='username']").val();
            //xxxxx
            //ajax请求判断 - 异步请求
            // $.ajax({
            //     type: "GET",
            //     url: "playerServlet?method=existeUsername",
            //     data: {
            //         username: username
            //     },
            //     success: function(data){
            //         if(data.result){
            //             //存在
            //             $("[name='username']").next().html("<font color='red'>用户名已经存在</font>");
            //             return false;
            //         } else {
            //             //不存在
            //             $("[name='username']").next().html("<font color='green'>用户名可用</font>");
            //             return true;
            //         }
            //     },
            //     dataType: "json"
            // });

            //ajax请求判断 - 同步请求
            var result = $.ajax({
                type: "GET",
                url: "playerServlet?method=existeUsername",
                data: {
                    username: username
                },
                async: false //设置该参数为false，表示当前的ajax为同步请求
            }).responseText;

            //转换成js对象
            var resultJs = JSON.parse(result);
            if(resultJs.result){
                //存在
                $("[name='username']").next().html("<font color='red'>用户名已经存在</font>");
                return false;
            } else {
                //不存在
                $("[name='username']").next().html("<font color='green'>用户名可用</font>");
                return true;
            }
        }

        //表单提交事件
        function submitForm(){
            console.log("----->表单提交！")
            //相关的校验
            var flag = existeUsername();
            //密码为空的校验....

            //根据校验的结果提交表单
            if(flag) {
                //提交表单
                $("#formid").submit();
            }
        }
    </script>
</head>
<body>
<form id="formid" action="playerServlet?method=register" method="post">
    <div class="main_div">
        <div class="title_div">注册页面</div>
        <div>
            <div>账号：<input name="username" onblur="existeUsername();"/><span></span></div>
            <div>密码：<input name="password" type="password"/></div>
            <div>昵称：<input name="nickname"/></div>
            <div>性别：<input name="sex" type="radio" value="0" checked/>男 <input name="sex" type="radio" value="1"/>女</div>
            <div>邮箱：<input name="email"/></div>
        </div>
        <div class="btn_div">
            <button type="button" onclick="submitForm();">注册</button>
            <button type="reset">重置</button>
        </div>
    </div>
</form>
</body>
</html>
